<!-- 
/**
*@author: ptt
*@desc: 滚动表格
*@date: 2023/12/12
*/ -->
<template>
    <div>
        <!-- 头部 -->
        <div class="ptt-table__header">
            <table>
                <colgroup>
                    <col
                        v-for="(item, idx) in colsWidth"
                        :key="idx"
                        :width="item"
                    />
                </colgroup>
                <thead>
                    <tr>
                        <th v-for="(item, idx) in header" :key="idx">
                            <span>{{ item.label }}</span>
                            <i
                                v-if="item.sort"
                                @click="sort(item.value, $event)"
                                :class="
                                    item.value == curSortValue
                                        ? sortClass
                                        : 'sort-none'
                                "
                            ></i>
                        </th>
                    </tr>
                </thead>
            </table>
        </div>

        <!-- 内容 -->
        <div class="ptt-table__content ptt-scroll-y">
            <table>
                <colgroup>
                    <col
                        v-for="(item, idx) in colsWidth"
                        :key="idx"
                        :width="item"
                    />
                </colgroup>
                <tbody>
                    <tr v-for="(item, idx) in tableData" :key="idx">
                        <td
                            v-for="(child, i) in header"
                            :key="i"
                            :class="[i == 0 ? 'ranking-icon' + idx : '']"
                        >
                            <!-- 序号 -->
                            <span v-if="child.value == 'XH'">
                                {{ idx + 1 }}</span
                            >
                            <span
                                v-else
                                :style="
                                    setSpanStyle(child.value, item[child.value])
                                "
                                :title="
                                    child.value == 'SYCBW'
                                        ? item[child.value]
                                        : ''
                                "
                            >
                                {{ $handleStr.setDefault(item[child.value]) }}
                            </span>
                            <!--  有单位才会展示  -->
                            <small>{{
                                $handleStr.setDefault(
                                    item[child.value + 'DW'],
                                    ' '
                                )
                            }}</small>
                        </td>
                    </tr>
                </tbody>
            </table>
            <NoData :data="tableData" text="暂无数据" />
        </div>
    </div>
</template>

<script setup>
import {
    toRefs,
    ref,
    computed,
    inject,
    onMounted,
    reactive,
    watchEffect
} from 'vue';
import { tableSort } from '@/utils/sort.js';
import waterObj from '@/utils/waterBussiness.js';
const $handleStr = inject('$handleStr');

const props = defineProps({
    data: {
        type: Array,
        require: true
        // default:()=>{
        //     return [
        //         {XH:10,DSMC: '无锡市'}
        //     ]
        // }
    },
    header: {
        type: Array,
        require: true
        // default:()=>{
        //     return [
        //         {label:'序号',value:'XH',sort:true} // sort是可选项,如果为true表示可以排序
        //     ]
        // }
    },
    // 表单内容高度
    height: {
        type: String
    },
    cols: {
        type: Array
        // default:()=>{
        //     return ['15%', '20%', '20%', '25%', '20%']
        // }
    }
});
const { header } = toRefs(props);
const tableData = ref(JSON.parse(JSON.stringify(props.data)));
// 使用watchEffect代替watch监听异步数据 节省性能开销
watchEffect(() => (tableData.value = props.data));

let curSortValue = null; //当前排序的表头key
let sortClass = 'sort-none'; //排序图标的类名 默认 'sort-none' , 'sort-up' 升序 , 'sort-down' 降序

// 计算列宽
const colsWidth = computed(() => {
    // 有传列宽就用列宽,没有取平均值
    if (props.cols) {
        return props.cols;
    } else {
        const len = props.header.length;
        const everageNum = 100 / len + '%';
        const arr = [];
        for (let i = 0; i < len; i++) {
            arr.push(everageNum);
        }
        return arr;
    }
});

/*@desc: 表格排序
 *@param: 当前排序的字段  事件对象
 *@returns: */
const sort = function (key, e) {
    curSortValue = key;
    // 更改排序图标
    sortClass = ['sort-down', 'sort-none'].includes(e.target.className)
        ? 'sort-up'
        : 'sort-down';

    if (sortClass == 'sort-up') {
        tableData.value = tableSort(tableData.value, key, 'up');
    } else {
        tableData.value = tableSort(tableData.value, key, 'down');
    }
};

// 设置单元格样式
const setSpanStyle = (key, val) => {
    let style = {};
    // 如果是水质状况
    if (key == 'SZZK') {
        style = {
            display: 'inline-block',
            backgroundColor: waterObj.setColor(val),
            minWidth: '60px',
            padding: '5px 0'
        };
    }
    // 如果是超标数量
    if (key == 'CBSL' && val > 20) {
        style = {
            color: '#ee3b5b'
        };
    }
    return style;
};
</script>
<style lang="scss" scoped>
.ptt-table__header th i {
    cursor: pointer;
    width: 16px;
    height: 13px;
}

.ptt-table__content {
    height: v-bind('props.height');
    overflow: auto;
}
</style>
